<template>
  <el-card class="box-card">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          :prefix-icon="Search"
          v-model="formInline.name"
          placeholder="请输入关键词"
        >
          <template #append>
            <span class="search" @click="handleSearch">搜索</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.optime"
          placeholder="时间"
          style="width: 200px"
          clearable
          @change="handleSelect"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe style="width: 100%" v-loading="loading">
      <el-table-column prop="optime" label="时间" />
      <el-table-column prop="operate" label="对象" />
      <el-table-column prop="name" label="描述" />
    </el-table>
    <div class="pagintion" style="margin-top: 20px">
      <el-pagination
        v-if="tableConfig.total"
        :current-page="tableConfig.page"
        :page-size="tableConfig.pageSize"
        :page-sizes="[10, 20, 30, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableConfig.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
// 搜索图标
import { Search } from '@element-plus/icons-vue';
// 接口api
import { getSystermLogList } from '@/api/system/log';
// 查询表单
const formInline = reactive({
  name: '',
  optime: '',
});
// 时间选项
const options = [
  { label: '时间', value: 'disabledTime', disabled: true },
  { label: '今天', value: 'today' },
  { label: '昨天', value: 'yesterday' },
  { label: '本周', value: 'thisWeek' },
  { label: '本月', value: 'thisMonth' },
];
// 加载动画
const loading = ref(false);
// 表格数据
const tableData = ref([]);
// 表格配置
const tableConfig = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});
// 时间切换
const handleSelect = () => {
  getList();
};
// 搜索
const handleSearch = () => {
  tableConfig.page = 1;
  getList();
};
// 获取getList
const getList = async () => {
  loading.value = true;
  try {
    delete tableConfig.total;
    const { data } = await getSystermLogList({
      ...tableConfig,
      ...formInline,
    });
    tableData.value = data.data;
    tableConfig.total = data.total;
  } catch (error) {
    console.log('error:', error);
  }
  loading.value = false;
};
// 切换大小
const handleSizeChange = (val) => {
  tableConfig.pageSize = val;
  getList();
};
// 切换页码
const handleCurrentChange = (val) => {
  tableConfig.page = val;
  getList();
};
onMounted(() => {
  getList(); //列表数据
});
</script>

<style lang="scss" scoped>
:deep(.el-input-group__append) {
  border: 1px solid #165dff !important;
  background: #165dff !important;
  color: #fff;
  cursor: pointer;
  padding: 0 !important;
  box-shadow: none !important;

  &:hover {
    background: #4080ff !important;
  }
}
</style>
